<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>#{request.getParameter('protectName')} 保护动作分析</title>
		<link rel="stylesheet"
			href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style>
</style>
	</ui:define>
	<ui:define name="content">
		<div class='container-fluid'>
			<div class='col-sm-12 '>
				<div class='box box-success'>
					<div class='box-body'>
						<div id="protectActTime" style="height: 500px;"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- <h:inputHidden id="breakerId" value="#{request.getParameter('breakerId')}"></h:inputHidden>  -->
		<h:inputHidden id="protectName"
			value="#{request.getParameter('protectName')}"></h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/charts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryLineChart.js"></script>
		<script>
			$(function() {
				var t1 = window.setInterval(function() {
					var w = $('.box-body').width() + "";
					if (w != '0') {
						var width = parseInt(w) + 'px';
						$("#protectActTime").css("width", width);
						protectActChart.getChart().resize();
						window.clearInterval(t1);
					}
				}, 20);
				$.getJSON("/rest/riskwarning/getProtectActTimes", function(
						result) {
					initActChart(result[0]);
				});
			})
			var protectActChart = new CategoryLine("protectActTime");
			function initActChart(actTime) {
				var dateTimeMap=[];
				var actTimeMap=[];
				for ( var i in actTime) {
					dateTimeMap.push(actTime[i][0]);
					actTimeMap.push(actTime[i][1]);
				};
				protectActChart.setxAxis(dateTimeMap).setyAxis(actTimeMap).setyAxisName('动作时间/ms').setxAxisTitle('日期').setyAxisTitle("动作时间/ms")
						.show();
			}
		</script>
	</ui:define>
</ui:composition>
